import styled from "@emotion/styled";
import { useState } from "react";
import { StyleProps } from "../type/style";
import ElevatorShaft from "./ElevatorShaft";
import StoreyZone from "./StoreyZone";

const StyleBuild = styled.div`
  width: 350px;
  max-width: 100%;
  min-height: 500px;
  border: 6px solid var(--elevatorBorderColor--);
  overflow: hidden;
  display: flex;
  margin: 3vh auto;
`;

const ElevatorBuild = () => {
  //设置电梯样式
  const [elevatorStyle, setElevatorStyle] = useState<StyleProps["style"]>();
  //设置门样式
  const [doorStyle, setDoorStyle] = useState<StyleProps["style"]>();
  //控制左右门的开关
  const [open, setOpen] = useState(false)
  //电梯移动逻辑
  const move = (diffFloor: number, offset: number) => {
    setElevatorStyle({
      transitionDuration: diffFloor + 's',
      //因为是用定位做的，所以直接调整距离底部的距离                                                                                                                                                                                                                                                                                                                                                                                                                              
      bottom: offset,
    });
    //门开
    setOpen(true)
    //但是等走到了再开
    setDoorStyle({
      animationDelay: diffFloor + 's'
    });
    //到了之后等三秒再关
    setTimeout(() => {
      setOpen(false)
    }, diffFloor * 1000 + 3000)
  };
  return (
    <StyleBuild>
      <ElevatorShaft
        elevatorStyle={elevatorStyle}
        leftDoorStyle={doorStyle}
        rightDoorStyle={doorStyle}
        leftToggle={open}
        rightToggle={open}
      ></ElevatorShaft>
      <StoreyZone onUp={(k: number, h: number) => move(k, h)} onDown={(k: number, h: number) => move(k, h)}></StoreyZone>
    </StyleBuild>
  );
};

export default ElevatorBuild;